<template>
  <div id="app">
    <h1>每日记事本</h1>
    <input
      type="text"
      v-model="text"
      placeholder="按回车确定"
      @keyup.enter="add"
    />
    <ul class="p">
      <li class="item" v-for="(item, index) in todos" :key="item">
        <div>
          <input type="checkbox" v-model="item.done" />
          <span v-bind:class="{ addClass: item.done }">{{ item.title }}</span>
        </div>
        <a @click="remove(index)" class="delete">删除</a>
      </li>
    </ul>
    <p>
      已完成{{ todos.length - todos.filter((item) => !item.done).length }} /{{
        todos.length
      }}
    </p>
    <button @click="clear">删除全部被勾选的计划</button>
  </div>
</template>

<script>
export default {
  name: "IndexTest",
  data() {
    return {
      text: "",
      todos: [
        {
          title: "吃饭",
          done: false,
        },
        {
          title: "睡觉",
          done: false,
        },
        {
          title: "学Vue",
          done: false,
        },
      ],
    };
  },
  methods: {
    add() {
      this.todos.push({
        title: this.text,
        done: false,
      });
      this.text = "";
    },
    remove(index) {
      this.todos.splice(index, 1);
    },
    clear() {
      this.todos = this.todos.filter((item) => !item.done);
    },
  },
};
</script>

<style scoped>
#app {
  width: 500px;
  margin: 0 auto;
}

li {
  list-style-type: none;
  height: 30px;
  display: flex;
  justify-content: space-between;
}

.p {
  position: relative;
  width: 100%;
  padding: 0;
}

.item {
  background-color: rgb(211, 243, 248);
}

.item:hover {
  background-color: rgba(246, 178, 122, 0.294);
}
</style>